<template>
    <!-- <h3>详情页</h3> -->
    <div class="detail">
        <div class="container">
            <button class="btn btn-sm btn-danger" @click="goBack"> <i class="bi bi-arrow-left"></i> 返回</button>
        </div>

        <div class="container">
            <section>
                <h2 style="margin: 25px 0px; font-weight: bold; ">| {{ article.title }}</h2>
                <img style="width: 100%;" :src="article.src" :alt="article.src" >
                <div class="author">作者: {{ article.author }}</div>
                <p>发布时间: {{ formatime(article.createAt) }}</p>
                <div class="content" style="min-height: 420px;" v-html="article.content">

                </div>
                <div class="tag">{{ article.tag }}</div>
                <div>
                    <button class="btn">评论</button>
                    <button class="btn">收藏</button>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { articleDetail, host } from '@/api/index'
import { reactive, watch } from 'vue';
const router = useRouter();//路由插件的实例
const route = useRoute();//路由对象
const goBack = () => {
    router.go(-1)
}
interface IItem {
    author: string
    cate: string
    cate_name: string
    content: string
    createAt: string
    id: number
    src: string
    tag: string
    title: string
}
let article = reactive<IItem>({
    author: "",
    cate: "",
    cate_name: "",
    content: "",
    createAt: "",
    id: 0,
    src: "",
    tag: "",
    title: "",
})
// 获取文章详情
const articleDetailFn = async (id: number | string) => {
    await articleDetail({ id })
        .then(
            (resData: any) => {
                console.log()
                if (resData) {
                    let { author, cate, cate_name, content, createAt, id, src, tag, title } = resData[0]
                    article.author = author;
                    article.cate = cate;
                    article.cate_name = cate_name;
                    article.content = content;
                    article.createAt = createAt;
                    article.id = id;
                    article.src = getImageUrl(src);
                    article.tag = tag;
                    article.title = title;
                }
            }
        )
}


// 工具函数
const getImageUrl = (src: string) => {
    return host + src
}
const formatime = (craeteAt: string) => {
    let date = new Date(craeteAt)
    return date.toLocaleDateString() + " " + (date.toLocaleTimeString())
}

watch(route, (newRoute) => {
    console.log(newRoute.query)
    let id = newRoute.query.id as string// 断言
    if (newRoute.query.id) {
        // 获取文章详情
        articleDetailFn(id)
    }
}, { deep: true, immediate: true })


</script>

<style lang="less">
.detail {
    padding: 15px 0px;
    section {
        line-height: 1.75;
        pre {
            padding: 10px;
            background-color: #333;
            color: #fff;
        }
    }
}

@media (max-width: 768px) {
    .detail {
        section {
            img {
                width: 100%;
                margin-top: 10px;
            }

            ol {
                li {
                    white-space: wrap;
                    word-wrap: break-word;
                }
            }


        }
    }
}
</style>